<template>  
<el-card shadow="hover" class="layout-padding-auto" >
    <!-- 选择界面 -->
    <div style="text-align: center;"  class="divcontainer">
        <div class="divcontainer_sub1">
            <span>
                产线:
                <el-select v-model="selectedMessage.LineCode" placeholder="请选择产线">
                    <el-option v-for="line in stateInfo.AllLines" :key="line.Text" :value="line.Text" :label="line.Text"></el-option>
                </el-select>                                      
            </span>
        </div>
    
        <div class="divcontainer_sub1">
            <span>
                工位:
                <el-select v-model="selectedMessage.StationCode" placeholder="请选择工站">
                    <el-option v-for="station in stateInfo.AllStations" :key="station.StationCode" :value="station.StationCode" :label="station.StationCode"></el-option>
                </el-select>
            </span>
        </div>

        <!-- <div class="divcontainer_sub1">
            <span>
                工位:
                <el-select v-model="selectedMessage.StationCode" placeholder="分析数据">
                    <el-option v-for="station in stateInfo.AllStations" :key="station.StationCode" :value="station.StationCode" :label="station.StationCode"></el-option>
                </el-select>
            </span>
        </div>

        <div class="divcontainer_sub1">
            <span>
                工位:
                <el-select v-model="selectedMessage.StationCode" placeholder="设备序号">
                    <el-option v-for="station in stateInfo.AllStations" :key="station.StationCode" :value="station.StationCode" :label="station.StationCode"></el-option>
                </el-select>
            </span>
        </div> -->
    </div><br>

    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="num" label="子组抽样数量" width="150"></el-table-column>
            <el-table-column prop="nums" label="组数" width="150">25</el-table-column>
            <el-table-column label="Xbar控制限" width="450">
                <el-table-column prop="ucl1" label="UCL" width="150"/>
                <el-table-column prop="xbar1" label="Xbar" width="150"/>
                <el-table-column prop="lcl1" label="LCL" width="150"/>
            </el-table-column>
            <el-table-column label="R控制限" width="450">
                <el-table-column prop="ucl2" label="UCL" width="150"/>
                <el-table-column prop="xbar2" label="Xbar" width="150"/>
                <el-table-column prop="lcl2" label="LCL" width="150"/>
            </el-table-column>
            <el-table-column prop="result" label="分析结果"></el-table-column>
        </el-table>
    </div>

    <div>
        <el-table :data="analysisData" style="width: 100%">  
            <!-- 静态列 -->  
            <el-table-column prop="id" label="序号" width="60"></el-table-column>  
            <!-- 动态列 -->  
            <el-table-column  
            v-for="(width, index) in computedColumnWidths"  
            :key="index"  
            :prop="`value${index}`"  
            :label="`${index + 1}`"
            :width="width"  
            ></el-table-column>  
        </el-table> 
    </div>

    <div>
    </div>

    <div>
        <div ref="controlChart1" style="width: 90%; height: 400px;"></div>  
        <div ref="controlChart2" style="width: 90%; height: 400px;"></div>  
    </div>

</el-card>
</template>  



<script setup lang="ts" name="SPC">  
import { onMounted, ref, reactive, watch, computed } from 'vue';  
import * as echarts from 'echarts';  
import other from '/@/utils/other';
import request from '/@/utils/request';


// 产线、工位选择信息
interface SelectedMessage {  
    StationCode: null | string; 
    LineCode: null | string;  
}  
const selectedMessage = ref<SelectedMessage>({  
    StationCode: null,  
    LineCode: null,  
});
const flagValue = ref<number>(0);

const stateInfo = reactive({
    //产线信息
    AllLines: [] as any[],
    //工位信息
    AllStations: [] as any[],
})

const list = ref([0]); 
const totalWidth = 1575; 
const computedColumnWidths = computed(() => {  
  const numColumns = list.value.length;  
  const baseWidth = Math.floor(totalWidth / numColumns); // 基本宽度  
  return Array.from({ length: numColumns }, (_, i) => baseWidth);  
});  

//抽样数据
const analysisData = ref<any>([]);  
//分析数据
const tableData = ref<any>([]);
//曲线数据
const lineData = ref<any>([])
// 创建一个响应式引用，用于存储ECharts实例  
const controlChart1 = ref(null);  
const controlChart2 = ref(null);

// 定义一个函数来初始化ECharts图表  
const initChart = (chart:any ,xdata: any, ydata: any, xbar:number, lcl:number, ucl:number, lineType:string) => {  
    // 基于准备好的dom，初始化echarts实例  
    const myChart = echarts.init(chart.value);   

    // 指定图表的配置项和数据  
    const option = {  
        title: {  
        text: 'Xbar-R控制图',
        left: 'center'
        },  
        tooltip: {
        trigger: 'axis'
        },  
        xAxis: { 
        type: 'category',
        data: xdata  
        },  
        yAxis: {},  
        series: [{  
        name: lineType,  
        type: 'line',  
        data: ydata,  
        markLine: {  
            silent: true,  
            symbol: 'none',
            data: [  
                {  
                yAxis: xbar,  
                name: 'XBar',  
                lineStyle: {  
                    color: 'red'  
                }  
                },  
                {  
                yAxis: ucl,  
                name: 'UCL',  
                lineStyle: {  
                    color: 'blue'  
                }  
                },  
                {  
                yAxis: lcl,  
                name: 'LCL',  
                lineStyle: {  
                    color: 'green'  
                }  
                }  
            ] 
        }  
        }]  
    };  

    // 使用刚指定的配置项和数据显示图表。  
    myChart.setOption(option);  
    // 如果你想在组件卸载时销毁ECharts实例，可以这样做：  
    // onUnmounted(() => {  
    //   if (myChart) {  
    //     myChart.dispose();  
    //   }  
    // });  
};  

//监听选择产线信息
watch(() => selectedMessage.value.LineCode, (newValue, oldValue) => {

    request({
        url: '/api/BaseInformation/Station/GetStationsByLine',
        method: 'post',
        data: {
            'LineCode':selectedMessage.value.LineCode
        }
    }).then(res => {
        stateInfo.AllStations = res.Stations.map((x: any) => x);
    })

    // 保存历史产线选择信息
    if(selectedMessage.value.LineCode != null){
        localStorage.setItem('selectedLineHistory',selectedMessage.value.LineCode)
    }

    if(flagValue.value == 1){  // 是读取历史数据
        const StationStorage = localStorage.getItem('selectedStationHistory'); //读取历史工位选择
        if(StationStorage){
            selectedMessage.value.StationCode = StationStorage;
        }
        // 清空标志位
        flagValue.value = 0;
    }else{
        selectedMessage.value.StationCode = ''
    }
    }
)


watch(() => selectedMessage.value.StationCode, (newValue, oldValue) => {

if(selectedMessage.value.StationCode != null){
    localStorage.setItem('selectedStationHistory', selectedMessage.value.StationCode)
}
// 刷新界面信息
if(selectedMessage.value.StationCode == null  || selectedMessage.value.StationCode == '') {
    ClearLineData()
}
else{
    getLineData('1', '1', 1, 1)
}

})

const ClearLineData = ()=> {
    tableData.value = [];
    analysisData.value = [];

//     if (controlChart1.value != null && controlChart1.dispose) {  
//         controlChart1.dispose();  
//         controlChart1.value = null;  
//     }  
//     if (controlChart2.value != null && controlChart2.value.dispose) {  
//         controlChart1.value.dispose();  
//         controlChart1.value = null;  
//     }  
}

const getLineData = (lineCode: string, stationCode: string, len: number, nums: number) => {
    list.value = Array.from({ length: 15 }, (_, i) => i);
    tableData.value = [
            {
                num: 5,
                nums: 25,
                ucl1:12.434,
                xbar1:7.009,
                lcl1:15.121,
                ucl2:132.423,
                xbar2:231.421,
                lcl2:231.412,
                result:"1,3,7组抽样结果异常"
            }
        ]   

    analysisData.value = [  
        { id: 1, value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},  
        { id: 2, value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},  
        { id: 3, value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},  
        { id: 4, value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},  
        { id: 5, value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},  
        { id: "和", value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},
        { id: "均值", value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},
        { id: "极差", value0: 6.85, value1: 3.145, value2: 21.123, value3:3.123, value4:9.129 , value5: 6.85, value6: 3.145, value7: 21.123, value8:3.123, value9:9.129, value10: 6.85, value11: 3.145, value12: 21.123, value13:3.123, value14:9.129},    
    ]
    initChart(controlChart1, ["样本1", "样本2", "样本3", "样本4", "样本5", "样本6","样本1", "样本2", "样本3", "样本4", "样本5", "样本6"], [120, 200, 150, 80, 70, 110,120, 200, 150, 80, 70, 110], 10.54, 66.41, 129.39, '样本均值'); 
    initChart(controlChart2, ["样本1", "样本2", "样本3", "样本4", "样本5", "样本6","样本1", "样本2", "样本3", "样本4", "样本5", "样本6"], [120, 200, 150, 80, 70, 110,120, 200, 150, 80, 70, 110], 10.54, 66.41, 129.39, '样本极差'); 
}

// 当组件挂载时，初始化图表  
onMounted(() => {
    other.getSelectList('/api/BaseInformation/Station/GetLines',[],false).then(x=>{stateInfo.AllLines = x});  
    
    const lineStorage = localStorage.getItem('selectedLineHistory');
    if(lineStorage)
    {
        selectedMessage.value.LineCode = lineStorage;
        flagValue.value = 1;
    }

});  
</script>  
    
<style scoped lang="scss">  
.divcontainer {  //.divcontainer1
    display: flex;  
    align-items: center;
    //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
    margin-right: 50px; 
}  
.divcontainer_sub1 {  //.divcontainer11
    display: flex;  
    align-items: center;
    //justify-content: space-between, left; /* 在元素之间添加等量的空间 */ 
    margin-right: 100px; 
} 

.el-table .cell {  
  border: 1px solid black !important; /* 示例边框颜色和宽度，根据需要调整 */  
}  
</style>